<template>
  <div id="reward_detail">
    <c-title :hide="false" :text="'奖励统计'" tolink="IntegralGetRecord"> </c-title>
    <div id="content_box">
      <div class="txt" v-for="(item, index) in info_two" :key="index">{{ item.name }}{{ item.sum }}</div>
      <div class="firstbox">
        <div class="flexBox" v-for="(item, index) in info" :key="index">
          <div class="flexBox_t">
            <span>{{ $i18n.t("money") }}</span
            >{{ item.sum }}
          </div>
          <div class="flexBox_b">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="tips" v-if="description && description.length > 0">
      <div v-for="item in description" :key="item" class="tips_txt">{{ item }}</div>
    </div>
  </div>
</template>

<script>
import reward_detail_controller from "./reward_detail_controller";

export default reward_detail_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
#reward_detail {
  .tips {
    margin: 0 0.75rem;
    text-align: left;
    font-size: 0.75rem;
    color: #6e6e79;
    .tips_txt{
      margin-bottom: 0.31rem;
    }
  }
  #content_box {
    margin: 0.63rem 0.75rem 0.59rem 0.75rem;
    background: #ffffff;
    border-radius: 0.5rem;
    padding: 0.84rem 0.75rem;
    box-sizing: border-box;
    .txt {
      text-align: left;
      font-weight: bold;
      font-size: 0.94rem;
      color: #00001c;
      line-height: 1.25rem;
    }
    .txt:first-child {
      margin-bottom: 0.31rem;
    }
    .firstbox {
      height: 7.34rem;
      margin: 0.72rem 0;
      box-sizing: border-box;
      background: #fafafa;
      border-radius: 0.63rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: center;
      .flexBox {
        width: 33%;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
  }
}
</style>
